<template>
  <!-- 容器 -->
  <div class="body">
    <!-- 顶部轮播图 搜索框部分 -->
    <div class="nav">
      <!-- 轮播图 -->
      <van-swipe
        class="my-swipe"
        :autoplay="5000"
        indicator-color="white"
        :style="{ height: h } "
      >
        <van-swipe-item
          ><img src="http://www.zlllcy.com/fuben/f2.png" alt=""
        /></van-swipe-item>
         <van-swipe-item><img src="http://www.zlllcy.com/fuben/f4.png" alt="" /></van-swipe-item>
        <van-swipe-item
          ><img src="http://www.zlllcy.com/fuben/f3.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="http://www.zlllcy.com/fuben/f6.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item>
          <!-- http://www.zlllcy.com/img/lbimg/03.jpg -->
          <img src="http://www.zlllcy.com/img/lbimg/02.jpg" alt=""/></van-swipe-item>
      </van-swipe>

      <!-- 点击时显示 -->
      <div v-if="isLogin" class="">
        <p @click="showArea = true" class="my-search-p">{{ val }}</p>
        <van-field
          class="my-search-p-field"
          readonly
          clickable
          name="area"
          :value="value"
          label=""
          placeholder=""
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :columns-num="2"
            :area-list="areaList"
            @confirm="onFirm"
            @cancel="showArea = false"
          />
        </van-popup>
      </div>
      <!-- 未点击时显示 -->
      <div v-else>
        <img
          @click="login"
          src="http://www.zlllcy.com/img/yuntu.png"
          class="my-search-img"
          alt=""
        />
      </div>

      <!-- 搜索框 -->
      <div class="my-search">
        <router-link to="/search">
          <van-search
            shape="round"
            v-model="value"
            placeholder="搜索医生、科室、医院、疾病"
          />
        </router-link>
      </div>
    </div>

    <!-- 主体容器 -->
    <div class="container">
      <!-- 图片选项卡 -->
      <div class="tab">
        <!-- 左边的快速预约 -->
        <div class="left">
          <img src="http://www.zlllcy.com/images/yuyue.png" alt="" @click="tosubscribe" />
        </div>
        <!-- 右边的个人健康卡 快速导航 -->
        <div class="right">
          <div class="top" @click="tohealthcode">
            <!--健康卡 -->
            <div class="healthCard">
              <img src="http://www.zlllcy.com/images/jkm.png" alt="" />
            </div>
            <!-- 图片 -->
            <div class="img-healthCard">
              <p>健康卡</p>
              <span>查看个人健康码</span>
            </div>
          </div>
          <div class="down" @click="toinoculation">
            <!-- 快速导航 -->
            <div class="healthCard">
              <img src="http://www.zlllcy.com/images/daili.png" alt="" />
            </div>
            <!-- 图片 -->
            <div class="img-healthCard">
              <p>查询地图</p>
              <span>查看地图寻找</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 8个选项 -->
      <div class="optionsCard">
        <!-- 上面四个 -->
        <div class="optionsCard_top">
          <!-- 疫苗预约 -->
          <div @click="toappointment">
            <img src="http://www.zlllcy.com/images/yimiaoyuyue.png" alt="" />
            <span>疫苗预约</span>
          </div>
          <div @click="toevaluation">
            <img src="http://www.zlllcy.com/images/baogao.png" alt="" />
            <span>报告查询</span>
          </div>
          <div @click="toinoculation">
            <img src="http://www.zlllcy.com/images/ditu.png" alt="" />
            <span>地图导航</span>
          </div>
          <div @click="toHealthcode">
            <img src="http://www.zlllcy.com/images/jkm.png" alt="" />
            <span>健康码</span>
          </div>
        </div>
        <!-- 下面四个 -->
        <div class="optionsCard_top">
          <!-- 疫苗预约 -->
          <div @click="toTravelcode">
            <img src="http://www.zlllcy.com/images/xingcheng.png" alt="" />
            <span>行程码</span>
          </div>
          <div @click="tohospital">
            <img src="http://www.zlllcy.com/images/yiyuan.png" alt="" />
            <span>预约医院</span>
          </div>
          <div @click="tofymap">
            <img src="http://www.zlllcy.com/images/fengxian.png" alt="" />
            <span>风险等级</span>
          </div>
          <div @click="tomore">
            <img src="http://www.zlllcy.com/images/gengduo.png" alt="" />
            <span>更多</span>
          </div>
        </div>
      </div>

      <!-- <div class="optionsCard">
        <ul class="items">
          <li>
            <img
              src="http://www.zlllcy.com/img/icon/2.png"
              alt=""
              @click="toappointment"
            />
          </li>
          <li>疫苗预约</li>
        </ul>
        <ul class="items">
          <li>
            <img
              src="http://www.zlllcy.com/img/icon/1.png"
              alt=""
              @click="toinoculation"
            />
          </li>
          <li>地图导航</li>
        </ul>
        <ul class="items">
          <li>
            <img
              src="http://www.zlllcy.com/img/icon/3.png"
              alt=""
              @click="toHealthcode"
            />
          </li>
          <li>健康码</li>
        </ul>
        <ul class="items">
          <li>
            <img
              src="http://www.zlllcy.com/img/icon/4.png"
              alt=""
              @click="toTravelcode"
            />
          </li>
          <li>行程码</li>
        </ul>
        <ul class="items">
          <li>
            <img
              src="http://www.zlllcy.com/img/icon/5.png"
              alt=""
              @click="toevaluation"
            />
          </li>
          <li>健康自评</li>
        </ul>
        <ul class="items">
          <li>
            <img
              src="http://www.zlllcy.com/img/icon/6.png"
              alt=""
              @click="tohospital"
            />
          </li>
          <li>网上医院</li>
        </ul>
        <ul class="items">
          <li>
            <img
              src="http://www.zlllcy.com/img/icon/7.png"
              alt=""
              @click="tofymap"
            />
          </li>
          <li>风险等级</li>
        </ul>
        <ul class="items">
          <li>
            <img
              src="http://www.zlllcy.com/img/icon/8.png"
              alt=""
              @click="tomore"
            />
          </li>
          <li>更多</li>
        </ul>
      </div> -->
    </div>

    <!-- 选项卡 -->
    <!-- appointment inoculation Health-code Travel-code evaluation hospital fymap more -->

    <!-- 8个选项卡 -->

    <!-- 图片选项卡 -->
    <div class="convenient">
      <!-- <div class="my-option clearfix">

        <div class="my-option-one">
          <router-link to="/subscribe">
            <span>新冠疫苗</span>
            <img src="http://www.zlllcy.com/img/register.png" alt="" />
            <button>快速预约</button>
          </router-link>
        </div>

        <div class="my-option-two">
          <router-link to="/health-code">
            <span class="size">健康卡</span>
            <img src="http://www.zlllcy.com/img/health_code.png" alt="" />
          </router-link>
        </div>

        <div class="my-option-three">
          <router-link to="/inoculation">
            <span class="size">我的档案</span>
            <img src="http://www.zlllcy.com/img/inoculation.png" alt="" />
          </router-link>
        </div>
      </div> -->

      <!-- 宫格 -->
      <!-- <div class="my-grid">
        <div class="my-grid-icon">
          <router-link to="/appointment">
            <img src="http://www.zlllcy.com/img/icon/1.png" alt="" />
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;疫苗预约</div>
          </router-link>
        </div>
        <div class="my-grid-icon">
          <router-link to="inoculation">
            <img src="http://www.zlllcy.com/img/icon/2.png" alt="" />
            <div>&nbsp;&nbsp;&nbsp;&nbsp;地图导航</div>
          </router-link>
        </div>
        <div class="my-grid-icon">
          <router-link to="/Health-code">
            <img src="http://www.zlllcy.com/img/icon/3.png" alt="" />
            <div>&nbsp;&nbsp;&nbsp;&nbsp;健康码</div>
          </router-link>
        </div>
        <div class="my-grid-icon">
          <router-link to="/Travel-code">
            <img src="http://www.zlllcy.com/img/icon/4.png" alt="" />
            <div>&nbsp;&nbsp;&nbsp;&nbsp;行程码</div>
          </router-link>
        </div>
        <div class="my-grid-icon">
          <router-link to="/evaluation">
            <img src="http://www.zlllcy.com/img/icon/5.png" alt="" />
            <div>&nbsp;&nbsp;&nbsp;&nbsp;健康自评</div>
          </router-link>
        </div>
        <div class="my-grid-icon">
          <router-link to="/hospital">
            <img src="http://www.zlllcy.com/img/icon/6.png" alt="" />
            <div>&nbsp;&nbsp;&nbsp;&nbsp;网上医院</div>
          </router-link>
        </div>
        <div class="my-grid-icon">
          <router-link to="/fymap">
            <img src="http://www.zlllcy.com/img/icon/7.png" alt="" />
            <div>&nbsp;&nbsp;&nbsp;&nbsp;风险等级</div>
          </router-link>
        </div>
        <div class="my-grid-icon">
          <router-link to="/more">
            <img src="http://www.zlllcy.com/img/icon/8.png" alt="" />
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多</div>
          </router-link>
        </div>
      </div> -->
    </div>

    <!-- 底部导航栏 -->
    <div>
      <van-tabs
        v-model="activeName"
        line-width="2rem"
        line-height="1px"
        class="header"
        animated:true
        color="#3cf"
        border:true
        title-active-color="#3cf"
        @click="onClick"
      >
        <!-- v-for拿取数据库的数据动态改变标签栏 -->
        <van-tab
          :name="item.rid"
          :title="item.rname"
          v-for="(item, i) in recommend"
          :key="i"
        >
          <van-row>
            <!-- v-for拿取数据库的数据动态生成列表标签 -->
            <div v-for="(item, i) in details" :key="i" class="content">
              <!-- <router-link :to="`/article?did=${item.id}`" class="router"> -->
              <router-link :to="{path:'/detail',query:{did:item.did}}" class="router">
                <van-col span="16" align="left">
                  <div class="title">{{ item.title }}</div>
                  <div class="author">{{ item.author }}</div>
                  <div class="date">{{ item.TIME }}</div>
                </van-col>
                <van-col span="8" class="pic"
                  ><van-image
                    width="5.1rem"
                    height="3rem"
                    radius="5"
                    :src="`${item.img}`"
                  />
                </van-col>
              </router-link>
            </div>
          </van-row>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 底部选项卡 -->
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      value: "",
      h: "0px",
      active: 0,
      selected: "page",
      activeName: "1",
      recommend: [],
      details: [],
      isShow: false,
      areaList: areaList,
      val: "",
      showArea: false,
      areaList: areaList,
      val: "",
      showArea: true,
      isLogin: false,
      rid: 1,
    };
  },
  watch: {
    // selected(newVal) {
    //   if (newVal == "page") {
    //     this.$router.push("/index");
    //   } else if (newVal == "service") {
    //     this.$router.push("/fymap");
    //   } else if (newVal == "consult") {
    //     this.$router.push("/consult");
    //   } else if (newVal == "me") {
    //     this.$router.push("/mypage");
    //   }
    // },
  },
  methods: {
    // tosubscribe tohealthcode toinoculation
    // 快速预约
    tosubscribe() {
      this.$router.push("/subscribe");
    },
    // 健康卡
    tohealthcode() {
      this.$router.push("/health-code");
    },
    // 导航地图
    toinoculation() {
      this.$router.push("/inoculation");
    },
    // tosubscribe  toappointment toinoculation toHealthcode toTravelcode tohospital tofymap tomore
    // 疫苗预约
    toappointment() {
      this.$router.push("/appointment");
    },
    // 地图导航
    toinoculation() {
      this.$router.push("/inoculation");
    },
    // 健康码
    toHealthcode() {
      this.$router.push("/Health-code");
    },
    // 行程码
    toTravelcode() {
      this.$router.push("/Travel-code");
    },
    // 健康自评
    toevaluation() {
      this.$router.push("/evaluation");
    },
    // 网上医院
    tohospital() {
      this.$router.push("/hospital");
    },
    // 风险等级
    tofymap() {
      this.$router.push("/fytables");
    },
    // 更多
    tomore() {
      this.$router.push("/more");
    },
    loadDetails() {
      this.axios.get(`/details/did?did=${this.rid}`).then((result) => {
        console.log(result);
        let details = result.data.data;
        console.log(details); // [{},{},{}]
        // 存入details
        this.details = details;

      });
    },
    onClick(name) {
      this.axios.get(`/details/did?did=${name}`).then((result) => {
        console.log(result);
        let details = result.data.data;
        console.log(details); // [{},{},{}]
        // 存入details
        this.details = details;
      });
    },
    loadRecommend() {
      // 发送http请求，获取类别列表
      this.axios.get(`/recommend/rid`).then((result) => {
        console.log(result);
        let recommend = result.data.data; // [{},{},{}]
        // 存入recommend
        this.recommend = recommend;
      });
    },
    onFirm(values) {
      this.val = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      let value = this.val.substr(0, 3);
      console.log(value);
      this.val = value;
      sessionStorage.setItem("province", this.val);
      this.showArea = false;
    },
    login() {
      this.isLogin = true;
    },
  },
  mounted() {
    // 动态生成高度
    let picw = 645;
    let pich = 333;
    let imgw = window.screen.width; // 屏幕宽度
    let imgh = (imgw * pich) / picw + "px";
    this.h = imgh;
    this.onClick();
    this.loadDetails();
    this.loadRecommend();
  },
};
</script>

<style lang="scss" scoped>
// 主体容器
.container {
  padding: 0 10px;
  // height: 31.25rem;
  // background-color: skyblue;
  // 主体的快速预约 健康卡  地图导航
  .tab {
    box-sizing: border-box;
    width: 100%;
    height: 6.25rem;
    // background-color: pink;
    display: flex;
    justify-content: space-between;
    // 左边的快速预约
    .left {
      width: 40%;
      height: 100%;
      // background-color: skyblue;
      display: flex;
      overflow: hidden;
      box-sizing: border-box;
      img {
        width: 95%;
        height: 100%;
      }
    }
    // 右边的健康码跟地图导航
    .right {
      width: 58%;
      height: 100%;
      // background-color: skyblue;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top,
      .down {
        width: 100%;
        height: 49%;
        text-align: right;
        background-color: pink;
        display: flex;
        box-sizing: border-box;
        p {
          margin: 0.75rem 0 0.3125rem 0;
          font-weight: 700;
        }
        span {
          font-size: 10px;
          color: #bbc0c3;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .top,
      .down {
        background-color: #fdfbef;
        // background-color: #adc9d1;
        // 健康卡
        .healthCard {
          width: 50%;
          height: 100%;
          // padding-left: 0.625rem;
          // background-color: pink;
        }
        // 健康图
        .img-healthCard {
          width: 50%;
          height: 100%;
          padding-right: 0.625rem;
          // background-color: skyblue;
        }
      }
      .down {
        background-color: #f7fcff;
        // background-color: #adc9d1;
      }
    }
  }

  // 8个列表选项卡
  .optionsCard {
    // background-color: pink;
    margin-top: 0.9375rem;
    // 上面4个
    .optionsCard_top {
      display: flex;
      justify-content: space-around;
      margin-bottom: 0.625rem;
    }
    .optionsCard_top > div {
      width: 50px;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      justify-content: space-around;
      // background-color: skyblue;
      img {
        width: 30px;
      }
      span {
        font-size: 12px;
        color: #3f3f3f;
      }
    }
  }
}

/* 顶部的轮播 搜索 */
.nav {
  height: 9rem;
  // /* background-color: skyblue; */
  margin-bottom: 0rem;
  box-sizing: border-box;
}

/* 快速预约 健康卡 */
.my-option {
  margin: 0 0 35px 0;
}

.size {
  font-style: italic;
  letter-spacing: 2px;
  color: #fff !important;
}

.my-swipe {
  z-index: 0;
  /* position: fixed; */
  margin-bottom: 300px;
  
}

.my-search {
  z-index: 1;
  position: absolute;
  margin-top: 50px;
}
.my-search-img {
  position: fixed;
  /* position: absolute; */
  z-index: 100;
  top: 10px;
  left: 10px;
  margin-bottom: 50px;
}

.my-search-p {
  position: fixed;
  top: 0.625rem;
  left: 1.4%;
  z-index: 100;
  color: #7c8f9b;
}
.my-search-p-field {
  z-index: -11;
  position: fixed;
  top: -5%;
}
.van-search {
  position: fixed;
  width: 87%;
  top: 0%;
  left: 11%;
  opacity: 0.8;
  background: transparent;
}
.my-swipe img {
  width: 100%;
  
}

.my-option img {
  width: 7rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  /* 浮动 */
  float: left;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

/*  */
.my-option-one {
  position: relative;
}
.my-option-one span {
  position: absolute;
  top: 25px;
  left: 60px;
  font-size: 0.9rem;
  color: #646566;
  font-family: "微软雅黑";
}
.my-option-one button {
  width: 30%;
  position: absolute;
  top: 150px;
  left: 45px;
  font-size: 20px;
  color: #fff;
  background-color: #a0ccff;
  border-radius: 5px;
  border: 0;
}
.my-option-two {
  position: relative;
}
.my-option-two span {
  position: absolute;
  margin-top: 10%;
  margin-left: -6rem;
  font-size: 0.6rem;
  color: #646566;
}
.my-option-three {
  position: relative;
}
.my-option-three span {
  position: absolute;
  margin-top: 6rem;
  margin-left: -4.8rem;
  font-size: 0.65rem;
  color: #646566;
}
/* 弹性盒布局 */
.my-grid {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-grid-icon {
  width: 22%;
  /* margin-right: 4%; */
  /* margin-bottom: 15px; */
  margin-bottom: 20px;
  /* position: relative; */
  text-align: center;
  line-height: 1rem;
  margin: 0 auto;
}
.my-grid > :nth-child(4n) {
  margin-right: 0;
}
.my-grid-icon div {
  /* position: absolute; */
  // top: 100%;
  /* left: 0.4rem; */
  color: #646566;
  font-size: 0.35rem;
  margin-left: -0.75rem;
}
.my-grid-icon img {
  width: 1.2rem;
  text-align: center;
  margin: auto 0;
}
.my-grid > :nth-child(1) {
  margin-top: 0.2rem;
}
.my-grid > :nth-child(5) {
  margin-top: 0.2rem;
}

.title {
  padding-left: 0.4rem;
  margin-top: 0.2rem;
  /* 多行文字超出时隐藏 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.5rem;
}
.author {
  display: block;
  padding-left: 0.4rem;
  position: absolute;
  padding-top: 2rem;
  font-size: 0.3rem;
}
.pic {
  margin-top: 0.4rem;
  display: inline-block;
  padding-left: 0.2rem;
}
/* .date {
  display: block;
  padding-left: 5px;
  position: absolute;
  top: 60px;
  left: 174px;
  font-size: 12px;
} */
.date {
  font-size: 0.1rem;
  margin-top: 2rem;
  margin-left: 7.3rem;
}
.content {
  display: inline-block;
  position: relative;
  height: 3.758rem;
  margin-top: 0.2rem;
  border-bottom: 1px solid #eee;
}
.router {
  color: black;
}

.van-tab {
  font-size: 0.8rem;
}
.body {
   padding-bottom: 2rem;
  box-sizing: border-box;
  // width: 100vw;
  // height: 100vh;
  // background-color: #adc9d1;
}
.my-option {
  margin-top: 0.2rem;
}
.header {
  margin-top: 0.2rem;
  margin-left: 0.25rem;
}
.van-row {
  margin-left: 0.1rem !important;
}
</style>